<template>
  <div>
    <Row>
      <Col>
        <Button
          type="primary"
          @click="handleAdd"
          v-hasC="{
            name: 'v1-clue-form-template-create',
            flag: 'v1/clue/form-template/create',
          }"
          >新增</Button
        >
      </Col>
    </Row>
    <Table
      :columns="columns"
      :data="data"
      :loading="loading"
      class="ivu-mt-16"
      :max-height="650"
    >
      <template slot="param_arr" slot-scope="{ row }">
        {{ row.param_arr.join(" | ") }}
      </template>
      <template slot="action" slot-scope="{ row }">
        <a
          @click="handleEdit(row)"
          v-hasC="{
            name: 'v1-clue-form-template-update',
            flag: 'v1/clue/form-template/update',
          }"
          >编辑</a
        >
        <Divider
          type="vertical"
          v-hasC="{
            name: 'v1-clue-form-template-update',
            flag: 'v1/clue/form-template/update',
          }"
        />
        <a
          @click="handleDel(row)"
          class="del"
          v-hasC="{
            name: 'v1-clue-form-template-delete',
            flag: 'v1/clue/form-template/delete',
          }"
          >删除</a
        >
      </template>
    </Table>

    <Page
      :total="total"
      class="ivu-mt-16"
      :modelValue="params.page"
      :page-size="params.pageSize"
      @on-change="changePage"
      show-total
      show-elevator
      show-sizer
      @on-page-size-change="changePageSize"
    />

    <Modal
      v-model="showForm"
      :title="isEdit ? '编辑模板' : '新增模板'"
      :draggable="true"
      :mask-closable="false"
      :width="800"
      @on-cancel="handleCancel"
      footer-hide
    >
      <Form
        :model="formItem"
        :label-width="80"
        ref="formItem"
        :rules="createRules"
      >
        <FormItem label="名称" prop="name">
          <Input v-model="formItem.name" placeholder="请输入名称" />
        </FormItem>
        <Row>
          <Col :span="8">
            <FormItem label="" prop="name" :label-width="15">
              <p>字段选择</p>
              <CheckboxGroup
                v-model="formItem.param_ids"
                @on-change="changeColumns"
              >
                <Checkbox
                  v-for="item in columnsList"
                  :key="item.value"
                  :label="item.value"
                  style="display: block;"
                  >{{ item.label }}（{{ item.type_str }}）</Checkbox
                >
              </CheckboxGroup>
            </FormItem>
          </Col>
          <Col style="min-height: 30px;">
            <Divider type="vertical" style="height: 100%;"
          /></Col>
          <Col :span="15">
            <p>模板预览</p>
            <FormItem
              v-for="item in checkColumns"
              :key="item.value"
              :label="item.label"
              :required="item.is_require ? true : false"
            >
              <Input
                v-if="item.type == 1 || item.type == 5"
                :type="item.type == 5 ? 'textarea' : 'text'"
                :placeholder="`请输入${item.label}`"
              />
              <InputNumber
                v-if="item.type == 2"
                :min="0"
                :placeholder="`请输入${item.label}`"
              />
              <Select
                v-if="item.type == 3 || item.type == 4"
                :multiple="item.type == 4"
                :placeholder="`请选择${item.label}`"
              >
                <Option
                  v-for="item in item.condition"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </FormItem>
          </Col>
        </Row>
      </Form>

      <div class="modalFoot">
        <Button @click="handleCancel()">取消</Button>
        <Button
          class="ivu-ml-16"
          :loading="btnLoading"
          type="primary"
          @click="handleSave()"
          >确定</Button
        >
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  formTemplateList,
  formTemplateEditInfo,
  formTeplateCreate,
  formTeplateUpdate,
  formTeplateDel,
} from "@/api/clueform/index.js";
export default {
  name: "clueset",
  data() {
    return {
      loading: false,
      columns: [
        {
          title: "名称",
          key: "name",
        },
        {
          title: "字段",
          slot: "param_arr",
        },
        {
          title: "操作日期",
          key: "operate_time",
          width: 170,
        },
        {
          title: "操作人",
          key: "operate_name",
          width: 120,
        },
        {
          title: "操作",
          slot: "action",
          fixed: "right",
          width: 140,
        },
      ],
      data: [],
      total: 0,
      params: {
        page: 1,
        pageSize: 10,
      },
      showForm: false,
      columnsList: [
        {
          label: "姓名",
          value: "name",
          type: "input",
        },
        {
          label: "年龄",
          value: "age",
          type: "number",
        },
        {
          label: "性别",
          value: "sex",
          type: "radio",
        },
      ],
      checkColumns: [],
      isEdit: false,
      btnLoading: false,
      formItem: {
        name: "",
        param_ids: [],
      },
      createRules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
    };
  },

  methods: {
    getData() {
      this.loading = true;
      formTemplateList(this.params)
        .then((res) => {
          this.total = res.total;
          this.data = res.list;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getInfo(id) {
      formTemplateEditInfo({ id }).then((res) => {
        this.columnsList = res.condition.param;
        if (id > 0) {
          this.formItem = {
            id: res.id,
            name: res.name,
            param_ids: res.param_ids,
          };
          this.changeColumns(res.param_ids);
        }
      });
    },
    changePage(e) {
      this.params.page = e;
      this.getData();
    },
    changePageSize(e) {
      this.params.pageSize = e;
      this.getData();
    },
    changeColumns(e) {
      this.checkColumns = [];
      e.forEach((item) => {
        this.columnsList.forEach((el) => {
          if (el.value == item) {
            this.checkColumns.push(el);
          }
        });
      });
    },
    initData() {
      this.checkColumns = [];
      this.formItem = {
        name: "",
        param_ids: [],
      };
      this.$refs.formItem.resetFields();
    },
    handleAdd() {
      this.initData();
      this.getInfo(0);
      this.isEdit = false;
      this.showForm = true;
    },
    handleDel(row) {
      this.$Modal.confirm({
        title: "删除确认",
        content: "删除后将不可恢复，是否确认删除",
        loading: true,
        onOk: () => {
          formTeplateDel({ id: row.id })
            .then(() => {
              this.getData();
              this.$Modal.remove();
            })
            .catch(() => {
              this.$Modal.remove();
            });
        },
      });
    },
    handleEdit(row) {
      this.initData();
      this.getInfo(row.id);
      this.isEdit = true;
      this.showForm = true;
    },
    handleCancel() {
      this.showForm = false;
    },
    handleSave() {
      this.$refs["formItem"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          if (this.isEdit) {
            formTeplateUpdate(this.formItem)
              .then((res) => {
                this.btnLoading = false;
                this.showForm = false;
                this.getData();
              })
              .catch(() => {
                this.btnLoading = false;
              });
          } else {
            formTeplateCreate(this.formItem)
              .then((res) => {
                this.btnLoading = false;
                this.showForm = false;
                this.getData();
              })
              .catch(() => {
                this.btnLoading = false;
              });
          }
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.modalFoot {
  text-align: right;
  border-top: 1px solid #ddd;
  padding-top: 16px;
  margin-top: 24px;
}
.title {
  color: #999;
  margin-bottom: 15px;
}
</style>
